{% extends "base.html" %}

{% block h1 %}Personagem{% endblock %}

{% block content %}
<fieldset>
<div id="change-character">
	<center>
		<table>
			<tr>
				{% for personagem in personagens %}
					<td><img src="{{ personagem.avatar }}" id="{{ personagem.id }}" class="select" /></td>
				{% endfor %}
			</tr>
			<tr align="center">
				{% for personagem in personagens %}
					<td><label>{{ personagem.nome }}</label></td>
				{% endfor %}
			</tr>
		</table>
		<form method="post" name="formSelecionar">
			{% csrf_token %}
			<input type="hidden" value="" name="id_Personagem" id="id_Personagem" />
			<input type="submit" value="Selecionar" id="selecionar" class="button" />
		</form>
	</center>
</div>
</fieldset>
{% endblock %}
{% block script %}
<script type="text/javascript">
	$(function() {
		$('#change-character img').click(function() {
			$('#change-character img:not(.select)').addClass("select");
			$(this).removeClass("select");
			$('#id_Personagem').attr('value',$(this).attr('id'));
			$('#selecionar').css('display', 'block');
		});
	});

</script>
{% endblock %} 